<template>
<div class="order_list_div" style="position: absolute;width: 100%">
	
	<my-header :title="'意见反馈'" :hasTitle="true"  :hasBack="true" :IDGModel="true" :IDGInputSelector="['#feedbackSend','#feedbackPhone','#feedbackEmail']"></my-header>
	
	
	<div class="feedback" style="text-align: left;" id="feedback">
		<p>选择类型</p>
		<div class="standard_con">
			<li :class="num == index ? 'active' : ''" v-for="(item, index) in data" :key="index" @click="num = index; categoryName = item.categoryName" >{{item.categoryName}}<i class="icon njfont nj-xuanzhong"></i></li>
		</div>
		<p>描述</p>
		<div class="feedback_text">
			<textarea placeholder="输入意见建议详情，帮助我们更好的理解您的心声"  v-model="describle" id="feedbackSend"  @keyup='countChar("counter")' maxlength="500"></textarea>
			<em id="counter">{{nowLength}}/500</em>
		</div>
		<!--<div class="feedback_text">
			<textarea placeholder="输入意见建议详情，帮助我们更好的理解您的心声" v-model="describle" maxlength="500"></textarea>
			<em id="counter">{{nowLength}}/500</em>
		</div>-->
		<p class="aui-margin-b-15">联系方式（建议您至少留下一个联系方式）</p>
		<ul class="aui-list aui-form-list aui-margin-b-15">
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">联系方式</div>
					<div class="aui-list-item-input">
						<input type="number" placeholder="请输入手机号码" ref="node1" id="feedbackPhone" v-model="phone">
					</div>
				</div>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">电子邮箱</div>
					<div class="aui-list-item-input">
						<input type="text" placeholder="请输入邮箱地址" id="feedbackEmail" ref="node2" v-model="mail"/>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="aui-content-padded">
		<div class="aui-btn aui-btn-danger aui-btn-block" @click="submit()">提交</div>
	</div>
	
</div>
</template>

<script>
//	:IDGModel="true" :IDGInputSelector="['#afterSaleOederNode']"
	import {queryQaCategoryList, submitQaAdvice} from '../../../api/wxh/getData.js';
	import MyHeader from "../../../real-containers/header";
	import { Toast } from '../../../utils/toast.js';
	import {mapMutations, mapActions, mapGetters} from "vuex";
	import axios from 'axios';
	import {zxBase,zxSessionId} from '../../../api/zxApi.js';
//	import {reFreshUserInfo} from '../../../utils/WXH/login.js';
	export default {
		data() {
			return {
				data: null,
				num: 0,
				phone: null,
				describle: null,
				mail: null,
				categoryName: null,
				nowLength:500
			}
		}
		,
		mounted() {
			if(!this.login){
				this.$router.push('/main/login');
				return
			}
			
			this.initData();
		}
		,
		computed:{
			...mapGetters('wxh', [
				'sessionId',
				'login'
			]),
			...mapGetters('zx', [
				'getFeedBackInfo'
			])
			
		}
		,
		watch:{
			describle(newVal,oldVal){
				this.saveInfo();
				//解决 复制粘贴字数不减少问题 
				 console.log(777)
				 if(this.describle && this.describle.length){
				 	console.log(888)
				 	this.nowLength = 500 - Number(this.describle.length);
				 }
				 
				 if(this.nowLength < 3){
				 	console.log(999)
				 	this.nowLength = 0;
//					document.getElementById('feedbackSend').disabled = 'disabled';
				 }
			},
			num(newVal,oldVal){
				this.saveInfo();
			},
			phone(newVal,oldVal){
				this.saveInfo();
			},
			describle(newVal,oldVal){
				this.saveInfo();
			},
			mail(newVal,oldVal){
				this.saveInfo();
			}
		},
		components: {
	        "my-header": MyHeader,
	    }
		,
		methods: {
			...mapActions('wxh', [
			  'getUserInfo'
			])
			,
			...mapMutations('wxh', [
			  'USER_INFO',
			  'ClEAR_SESSIONID',
			  'LOGO_OUT',
			  'LOGO_IN',
			  'CLEAR_INFO'
			])
			,
			...mapMutations('zx', [
				"setFeedBackInfo"
			])
			,
			//存用户填入信息
			saveInfo(){
				let obj = {
					num:this.num,
					phone:this.phone,
					describle:this.describle,
					mail:this.mail
				};
				this.setFeedBackInfo(obj);
			},
			countChar(spanName){  
				console.log(111)
				 if(this.describle && this.describle.length){
				 	console.log(222)
				 	this.nowLength = 500 - Number(this.describle.length);
				 }
				//解决 出现字数-1的问题 
				 if(this.nowLength < 3){
				 	console.log(333)
				 	this.nowLength = 0;
//					document.getElementById('feedbackSend').disabled = 'disabled';
				 }
			}, 
			checkUserSave(){
				var obj = this.getFeedBackInfo;
				for(let item in obj){
					if(item){
						return false;
					}
				}
				return true;
			},
			//对接运营接口
			getInitData(){
				let flag = this.checkUserSave();
				var obj = this.getFeedBackInfo;
				if(!flag){
//					this.num = obj.num;  // 返回数据后台可控制，暂未从本地获取
					this.phone = obj.phone;
					this.describle = obj.describle;
					this.mail = obj.mail;
				}
	            let config = {
	            	url:window.api.customer_host+"/questionCategoryVue/getListByContentType?contentType=2",
	            	method: 'GET',
	            	headers: {'sessionId': this.sessionId},
	            };
	             axios(config).then((res)=>{
	             
	             	if(res.returncode == 0) {
						Toast({
						  message: res.msg,
						  type: 'fail',
						  duration: 2000
						});
	
						return
					}
	             	console.log(res.data.data);
	             	this.data = res.data.data;
	             })
			},
			//对接运营接口  提交意见反馈
			submitDate(){
//				/customerAdviceVue/insertQaAdviceFromH5
				let params = {
						"categoryId":this.data[this.num].categoryId,
						"questionDesc":this.describle,
						"contractPhone":this.phone,
						"contractEmail":this.mail,
						"questionImages":""
				}
//					http://172.19.5.131:33004   运营本地
				
//				let config = {
//	            	url: window.api.local_host+'/customerAdviceVue/insertQaAdviceFromH5',
//	            	method: 'POST',
//	            	data: params,
//	            	headers: {'sessionId': this.sessionId, 'Content-Type':'application/json', 'Accept' : 'application/json'},
//	            }
				let config = {
	            	url: window.api.customer_host+'/customerAdviceVue/insertQaAdviceFromH5',
	            	method: 'POST',
	            	data: params,
	            	headers: {'sessionId': this.sessionId, 'Content-Type':'application/json', 'Accept' : 'application/json'},
	            }
				axios(config).then((res)=>{
					console.log(res.data.returnCode,'提交意见反馈');
					if(res.data.returnCode == 0) {
						console.log(res,'提交意见反馈1');
						Toast({
						  message: res.msg,
						  type: 'fail',
						  duration: 2000
						});
						return
					} else if (res.data.returnCode == 1) {
						console.log(res,'提交意见反馈2');
						let obj = {};
						this.setFeedBackInfo(obj);
						Toast({
						  message: "反馈提交成功",
						  type: 'success',
						  duration: 2000
						});
						this.$router.push({ path:'server'})	;
					}
				})
			},
			async initData() {
			    //调用個人中心的方法刷新用户信息 防止vuex用户信息失效
				this.reFreshUserInfo(this);
				//初始化数据
				this.getInitData();
			}
			,
			async submit () {
				let categoryId = this.data[this.num].categoryId;
				if(this.describle == null){
					Toast({
					  message: '类型和描述不能为空',
					  type: 'fail',
					  duration: 2000
					});
                    return
				}
				if(!this.phone && !this.mail){
					Toast({
					  message: '请输入联系方式',
					  type: 'fail',
					  duration: 2000
					});
					return
				}
				if(this.phone){
					let reg = new RegExp(/^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/)
	                if(!reg.test(parseInt(this.phone))){
	                    Toast({
						  message: '手机格式不正确',
						  type: 'fail',
						  duration: 2000
						});
	                    return
	                }
				}
				
				if(this.mail){
					var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/; 
					var flag = reg.test(this.mail);
					console.log(reg.test(this.mail),'邮箱校验'); 
					if(!flag){
						 Toast({
						  message: '邮箱格式不正确',
						  type: 'fail',
						  duration: 2000
						});
	                    return
					}
				}
				this.submitDate();
			},
		}
	}
</script>
<style scoped="scoped">
	.feedback{
		border-top: 0;
	}
	.feedback_text em {
	    position: absolute;
	    right: 0.5rem;
	    bottom: -1rem;
	    color: #9A9A9A;
	}


</style>